<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item"
    :show-require-mark="floatingZoneSwitch.required">

    <n-switch class="h-label" v-model:value="form.floating_zone_switch" :disabled="floatingZoneSwitch.required">
    </n-switch>
  </n-form-item>
  <div v-if="form.floating_zone_switch" class="creative-component-secend-form-item">
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="floatingZoneSwitch.required">
      <div class='flex flex-1'>
        <label class="text-right mr-10 text-label">浮层卡片类型</label>
        <n-radio-group v-model:value="form.floating_zone_type">
          <n-radio value="FLOATING_ZONE_TYPE_IMAGE_TEXT">
            图文复合
          </n-radio>
          <n-radio value="FLOATING_ZONE_TYPE_SINGLE_IMAGE" v-if="floatingZoneSigleImageId.name">
            单图
          </n-radio>
        </n-radio-group>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="form.floating_zone_type === 'FLOATING_ZONE_TYPE_IMAGE_TEXT'"
      :show-require-mark="floatingZoneSwitch.required" :rule="formRule.floating_zone_image_id">
      <div class="flex flex-1">
        <label class="text-right mr-10 text-label">创意图片</label>
        <upload :value="fileInfo" style="width: 160px" :params="upParams" @finish="finish" :rules="iamgeRules">
        </upload>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="floatingZoneSwitch.required" :rule="formRule.floating_zone_name">
      <div class="flex flex-1">
        <label class="text-right mr-10 text-label">文案一</label>
        <n-input :show-count="true" :maxlength="rules.floating_zone_name.max_length"
          :minlength="rules.floating_zone_name.min_length"
          :placeholder="fieldComponents.floating_zone_name ? fieldComponents?.floating_zone_name.description : ''"
          v-model:value="form.floating_zone_name"></n-input>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="floatingZoneSwitch.required" :rule="formRule.floating_zone_desc">
      <div class="flex flex-1">
        <label class="text-right mr-10 text-label">文案二</label>
        <n-input
          :placeholder="fieldComponents.floating_zone_desc ? fieldComponents?.floating_zone_desc.description : ''"
          :show-count="true" :maxlength="rules.floating_zone_desc.max_length"
          :minlength="rules.floating_zone_desc.min_length" v-model:value="form.floating_zone_desc"></n-input>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="floatingZoneSwitch.required" :rule="formRule.floating_zone_button_text">
      <div class="flex top flex-1">
        <label class="text-right mr-10 text-label">按钮文案</label>
        <n-select clearable filterable :options="optional" v-model:value="form.floating_zone_button_text"></n-select>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="form.floating_zone_type === 'FLOATING_ZONE_TYPE_SINGLE_IMAGE'"
      :show-require-mark="floatingZoneSwitch.required" :rule="formRule.floating_zone_single_image_id">
      <div class="flex flex-1">
        <label class="text-right mr-10 text-label">创意图片</label>
        <upload style="width: 160px" :params="upParams" @finish="finish"></upload>
      </div>
    </n-form-item>
  </div>


</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch, NRadioGroup, NRadio, NSelect, c } from 'naive-ui';
import upload from './upload.vue';

import { getImageList } from '@/api/intelligent';
import {
  NInput,

  NFormItem,
} from 'naive-ui'
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);
const account = computed(() => {
  const accounts = store.state.adv.accounts;
  return accounts[0];
})

const position = computed(() => {
  return store.state.adv.modal.position;
})
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});

const upParams = reactive({
  accept: 'image/*',
  action: '/api/adgroup/image/upload',
  data: {
    accountCode: account.value ? account.value.accountCode : undefined,
    adcreativeTemplateId: creativor.value.creativeTemplateId
  }
});


function getRestriction(restriction: any) {
  const { video_restriction, image_restriction } = restriction || {};
  return video_restriction || image_restriction || {};

}


const component = toRef<any, any>(props, 'component');
const fieldComponents = computed(() => {
  return component.value.children || {};
})

const childrenComponent = computed(() => component.value.children || {});
const floatingZoneSwitch = computed(() => ({ required: component.value.required } || { required: false }));
const floatingZoneImageId = computed(() => childrenComponent.value.floating_zone_image_id || {});

const floatingZoneSigleImageId = computed(() => childrenComponent.value.floating_zone_single_image_id || {});

const iamgeRules = computed(() => {
  const rules = floatingZoneImageId.value.restriction && floatingZoneImageId.value.restriction.image_restriction ? floatingZoneImageId.value.restriction.image_restriction : {};
  return {
    rect: [rules.min_width || rules.width || 500, rules.min_height || rules.height || 500],
    file_format: rules.file_format || [],
    duration: rules.min_duration || rules.max_duration ? [rules.min_duration, rules.max_duration] : [],

    suggest: rules.width || rules.height ? [rules.width, rules.height] : [],
    size: rules.file_size || (512000),
    ratio: rules.ratio_width ? [rules.ratio_width, rules.ratio_height] : []
  };
});


const fileInfo = ref({
  media_url: '',
  meta_type: 'image'
});
async function getImage() {
  const mediaId = component.value.value.floating_zone_type === 'FLOATING_ZONE_TYPE_IMAGE_TEXT' ? component.value.value['floating_zone_image_id'] : component.value.value['floating_zone_single_image_id']
  if (!account.value) return;
  if (!mediaId) return;
  const res = await getImageList({
    accountCode: account.value.accountCode,
    mediaId,
    pageNum: 10,
    pageSize: 10
  });
  const info = res.data.length ? res.data[0] : {};
  fileInfo.value.media_url = info.previewUrl || '';


}
getImage();

const rules = {
  floating_zone_name: fieldComponents.value.floating_zone_name?.restriction?.text_restriction || {},
  floating_zone_desc: fieldComponents.value.floating_zone_desc?.restriction?.text_restriction || {}
}

const optional = computed(() => {
  if(position.value.isWechatChannels) return [{ "label": "观看直播", "value": "观看直播" }]
  return [{ "label": "了解更多" }, { "label": "了解详情" }, { "label": "去逛逛" }, { "label": "咨询试驾" }, { "label": "查看全文" }, { "label": "查看商品" }, { "label": "查看详情" }, { "label": "立即体验" }, { "label": "立即咨询" }, { "label": "立即开通" }, { "label": "立即抢购" }, { "label": "立即申请" }, { "label": "立即秒杀" }, { "label": "立即询价" }, { "label": "立即购买" }, { "label": "立即追剧" }, { "label": "立即预定" }, { "label": "立即预约" }, { "label": "立即领取" }, { "label": "继续观看" }, { "label": "联系商家" }, { "label": "联系客服" }, { "label": "观看更多" }, { "label": "观看直播" }, { "label": "观看短剧" }, { "label": "试驾有礼" }, { "label": "进入小程序" }, { "label": "阅读小说" }, { "label": "预约试驾" }, { "label": "领取优惠" }].map(_ => {
    return {
      label: _.label,
      value: _.label
    }
  })
})



const form = reactive({
  floating_zone_switch: component.value.value.floating_zone_switch || floatingZoneSwitch.value.required,
  floating_zone_image_id: component.value.value.floating_zone_image_id,
  floating_zone_name: component.value.value.floating_zone_name || '',
  floating_zone_desc: component.value.value.floating_zone_desc || '',
  floating_zone_button_text: component.value.value.floating_zone_button_text || undefined,
  floating_zone_type: component.value.value.floating_zone_type || 'FLOATING_ZONE_TYPE_IMAGE_TEXT',
  floating_zone_single_image_id: component.value.value.floating_zone_single_image_id || '',
});

const formRule = reactive({
  floating_zone_name: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.floating_zone_name) {
        return new Error('文案一不能为空!')
      }
      return true;
    }
  },
  floating_zone_desc: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.floating_zone_desc) {
        return new Error('文案二不能为空!')
      }
      return true;
    }
  },
  floating_zone_button_text: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.floating_zone_button_text) {
        return new Error('按钮文案不能为空!')
      }
      return true;
    }
  },
  floating_zone_image_id: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.floating_zone_image_id) {
        return new Error('图片不能为空!')
      }
      return true;
    }
  },
  floating_zone_single_image_id: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.floating_zone_single_image_id) {
        return new Error('图片不能为空!')
      }
      return true;
    }
  },

})







watch(form, () => {
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
});


function finish(fileInfo: any) {
  const key = component.value.value.floating_zone_type === 'FLOATING_ZONE_TYPE_IMAGE_TEXT' ? 'floating_zone_image_id' : 'floating_zone_single_image_id';
  form[key] = fileInfo.mediaId;
}





</script>

<style lang="scss">
@import url('./style.scss');
</style>
